<template>

    <div class="login_page">
        <!--      <div >-->
        <!--        <audio id="audio" :src="require('../../assets/music/向文涛-风度.mp3')"></audio>-->
        <!--      </div>-->
        <div class="login_box">
            <div class="center_box">
                <!-- 登录&注册-->
                <div :class="{login_form: true, rotate: tab == 2}">
                    <div :class="{tabs: true, r180: reverse == 2}">
                        <div class="fl tab" @click="changetab(1)">
                            <span :class="{on: tab == 1}">登录</span>
                        </div>
                        <div class="fl tab" @click="changetab(2)">
                            <span :class="{on: tab == 2}">注册</span>
                        </div>
                    </div>

                    <!-- 登录 -->
                    <div class="form_body" v-if="reverse == 1">
                        <!-- submit.prevent 阻止默认表单事件提交，采用loginSubmit -->
                        <form @submit.prevent="loginSubmit">
                            <input type="text" v-model="loginData.name" placeholder="请输入用户名" autocomplete="off">
                            <input type="password" v-model="loginData.pwd" placeholder="请输入密码" autocomplete="off">
                            <div class="error_msg">{{loginMessage}}</div>
                            <input type="submit" v-if="subState" disabled="disabled" value="登录中···" class="btn"/>
                            <input type="submit" v-else value="登录" @submit="loginSubmit" class="btn"/>
                        </form>
                    </div>

                    <!-- 注册 -->
                    <div class="form_body r180" v-if="reverse == 2">
                        <form @submit.prevent="regSubmit">
                            <input type="text" v-model="registerData.username" placeholder="请输入用户名" autocomplete="off">
                            <input type="password" v-model="registerData.password" placeholder="6-30位密码，可用数字/字母/符号组合"
                                   autocomplete="off">
                            <input type="password" v-model="registerData.repassword" placeholder="确认密码">
                            <div class="error_msg">{{regMessage}}</div>
                            <div class="agree">
                                <input type="checkbox" id="tonyi" v-model="registerData.check">
                                <label for="tonyi">我已经阅读并同意</label><a href="jvascript:;"
                                                                      @click="xieyi = true">《用户协议》</a>
                            </div>
                            <input type="submit" v-if="subState" disabled="disabled" value="提交中···" class="btn">
                            <input type="submit" v-else value="注册" class="btn">
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- 用户协议 -->
        <div class="xieyi" v-if="xieyi" @click.self="xieyi = false">
            <div class="xieyi_content">
                <div class="xieyi_title">请认真阅读用户协议</div>
                <div class="xieyi_body" v-if="xieyiContent" v-html="xieyiContent">
                </div>
                <input type="button" class="xieyi_btn" value="确定" @click="xieyi = false">
            </div>
        </div>
    </div>

</template>
<script>
    import {isvalidUsername} from '@/utils/validate.js'
    import {getUserByUsername, register, getXieyi} from '@/api/auth'

    export default {

        data() {
            return {
                tab: 1, // 高亮当前标签名
                reverse: 1, // 旋转 1 登录，2 注册
                loginMessage: '', //登录错误提示信息
                regMessage: '', //注册错误提示信息
                subState: false, //提交状态
                xieyi: false, // 显示隐藏协议内容
                xieyiContent: null, // 协议内容
                redirectURL: '', // 登录成功后重写向地址
                loginData: { // 登录表单数据
                    name: '',
                    pwd: ''
                },
                registerData: { // 注册表单数据
                    username: '',
                    password: '',
                    repassword: '',
                    check: false
                },
            }
        },
        // mounted() {
        //   // 播放音乐
        //   let oAudio = document.querySelector("#audio");
        //   oAudio.onended = function() {
        //     //播放完毕，重新循环播放
        //     oAudio.load();
        //     oAudio.play();
        //   };
        //   this.audioAutoPlay()
        // },
        async created() {
            if (this.$route.query.redirectURL) {
                console.log("redirectURL=" + this.$route.query.redirectURL)
                this.redirectURL = this.$route.query.redirectURL;
            }
            //获取协议内容
            const xieContent = await getXieyi();
            //console.log("xieContent="+xieContent)
            this.xieyiContent = xieContent
        },
        methods: {
            // audioAutoPlay() {
            //   let audio = document.getElementById("audio");
            //   audio.play();
            //   document.removeEventListener("touchstart", this.audioAutoPlay);
            // },

            // 切换标签
            changetab(int) {
                this.tab = int;
                let _that = this;
                setTimeout(() => {
                    this.reverse = int
                }, 200)
            },

            // 提交登录
            loginSubmit() {
                console.log("登录")
                if (this.subState) {
                    return false;
                }
                if (!isvalidUsername(this.loginData.name)) {
                    this.loginMessage = "请输入正确的用户名"
                    return false;
                }
                if (!isvalidUsername(this.loginData.pwd)) {
                    this.loginMessage = "请输入正确的密码"
                    return false;
                }
                this.subState = true
                this.$store.dispatch('userLogin', this.loginData).then(response => {
                    let {code, message} = response;
                    if (code == 200) {
                        //跳回到来源地址
                        console.log("跳回到来源地址")
                        console.log("this.redirectURL=" + this.redirectURL)
                        window.location.href = this.redirectURL;
                    } else {
                        // this.loginMessage = "用户名或密码错误"
                        this.loginMessage = message
                    }
                    this.subState = false
                }).catch(error => {
                    this.subState = false
                    this.loginMessage = "系统繁忙，请稍后重试"
                })
            },

            // 提交注册
            async regSubmit() {
                console.log("注册")
                if (this.subState) {
                    return false;
                }
                if (!isvalidUsername(this.registerData.username)) {
                    this.regMessage = "请输入4-30位的用户名"
                    return false;
                }

                if (!isvalidUsername(this.registerData.password)) {
                    this.regMessage = "请输入正确的密码"
                    return false;
                }
                //校验密码
                if (this.registerData.password.length < 6) {
                    this.regMessage = "请输入6到30位的密码，区分大小写且不能有空格"
                    return false;
                }
                if (this.registerData.password !== this.registerData.repassword) {
                    this.regMessage = "两次输入的密码不一致"
                    return false;
                }
                if (!this.registerData.check) {
                    this.regMessage = "请阅读并同意用户协议"
                    return false;
                }
                this.subState = true//提交中
                getUserByUsername({username: this.registerData.username}).then(response => {
                    debugger

                    let {code, message, data} = response;
                    if (!code == 200) {
                        this.subState = false
                        this.regMessage = message
                        return false;
                    }
                    if (data) {//true表示已经被注册
                        this.subState = false
                        this.regMessage = "用户名已经被注册"
                        return false;
                    } else {
                        register(this.registerData).then(resopnse => {
                            let {code, message} = resopnse;
                            if (code == 200) {
                                //跳回到登录页
                                console.log("回到登录页")
                                this.changetab(1);
                            } else {
                                this.loginMessage = message
                            }
                            this.subState = false
                        }).catch(error => {
                            this.subState = false
                            this.loginMessage = "系统繁忙，请稍后重试"
                        });
                    }
                });
            }
        }
    }
</script>
<style scoped>
    @import '../../assets/style/login.css';
</style>

